<template>
  <div class="createVoucher">
    <div>
      <el-button type="primary" size="mini" @click="save">{{ $t('btn.save') }}</el-button>
    </div>
    <div class="header">
      <el-form :model="voucher" label-width="100px">
        <el-form-item :label="$t('shop.name1')">
          <el-input v-model="voucher.fname" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.tablename')">
          <el-input v-model="voucher.ftablename" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.descrip')">
          <el-input v-model="voucher.fdescription" size="mini" />
        </el-form-item>
        <el-form-item :label="$t('market.example')">
          <el-input v-model="voucher.li" size="mini" disabled />
        </el-form-item>
        <el-form-item :label="$t('market.createDate')">
          <el-input v-model="voucher.data" disabled size="mini" />
        </el-form-item>
      </el-form>
    </div>
    <div class="con">
      <div class="conLef">
        <div style="margin-bottom: 10px;">
          <el-button size="mini" @click="newLine1">{{ $t('btn.add') }}</el-button>
          <el-button size="mini" type="danger" @click="delOption1()">{{ $t('shop.delete') }}</el-button>
        </div>
        <jc-table
          :table-data="datetypeList"
          table-height="500px"
          @rowClick="rowClick"
        >
          <el-table-column :label="$t('market.typefield')" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typefield" size="mini" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('shop.name1')" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.typename" size="mini" />
            </template>
          </el-table-column>
        </jc-table>
      </div>
      <div class="conRig">
        <div>
          <el-button size="mini" @click="newLine">{{ $t('btn.add') }}</el-button>
          <el-button size="mini" type="danger" @click="delOption()">{{ $t('shop.delete') }}</el-button>
        </div>
        <div
          v-for="(item, index) in tableConfigList"
          :key="item"
          :class="{'contant': true,'active': indexSelf===index}"
          @click="indexSelf=index"
        >
          <div class="content1">
            <el-form :model="item" label-width="100px">
              <el-form-item :label="$t('market.viewname')">
                <el-input v-model="item.fviewName" size="mini" />
              </el-form-item>
              <el-form-item :label="$t('market.primaryKey')">
                <el-input v-model="item.fprimaryKey" size="mini" />
              </el-form-item>
              <el-form-item :label="$t('market.sequence')">
                <el-input v-model="item.flevel" size="mini" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="mini" @click="verify(item.fsql, index)">{{ $t('market.checkout') }}</el-button>
              </el-form-item>
              <el-form-item :label="$t('market.viewsql')" class="textare">
                <el-input v-model="item.fsql" type="textarea" size="mini" class="textare1" />
              </el-form-item>
              <el-form-item :label="$t('market.connsql')" class="textare">
                <el-input v-model="item.fconnsql" size="mini" />
              </el-form-item>
            </el-form>
          </div>
          <div class="content2">
            <jc-table
              :table-data="item.options"
              table-height="180px"
            >
              <el-table-column :label="$t('market.clausesname')" prop="fname" align="center" />
              <el-table-column :label="$t('market.isshow')" align="center">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.fisshow" size="mini" />
                </template>
              </el-table-column>
            </jc-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveTemplateConfig, checkSqlView } from '@/api/financial/voucher'
export default {
  name: 'CreateVoucher',
  data() {
    return {
      voucher: {
        fname: '',
        fdescription: '',
        ftablename: ''
      },
      tableConfigList: [
        {
          fsql: '',
          fconnsql: '',
          flevel: '',
          fprimaryKey: '',
          fviewName: '',
          options: []
        }
      ],
      datetypeList: [
        {
          typefield: '',
          typename: ''
        }
      ],
      indexSelf: 0, // 视图名称
      indexSelf1: 0 // 数据库字段名
    }
  },
  methods: {
    // 保存
    save() {
      this.tableConfigList.map(item => {
        item.options.forEach(res => {
          res.fisshow ? res.fisshow = 1 : res.fisshow = 0
        })
      })
      const DATA = {
        ...this.voucher,
        datetypeList: this.datetypeList,
        tableConfigList: this.tableConfigList
      }
      saveTemplateConfig(DATA).then(res => {
        if (res.code === 0) {
          this.$message({ showClose: true, message: res.message, type: 'success' })
          this.clearDA()
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 检验
    verify(ev, index) {
      checkSqlView({ fsql: ev }).then(res => {
        if (res.code === 0) {
          this.tableConfigList[index].options = res.data
          res.data.map(item => {
            item.fisshow ? item.fisshow = true : item.fisshow = false
          })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    clearDA() {
      this.delDatetypeIds = []
      this.delTableConfigIds = []
      this.voucher = {
        fname: '',
        fdescription: ''
      }
      this.tableConfigList = [
        {
          fsql: '',
          fconnsql: '',
          flevel: '',
          fprimaryKey: '',
          fviewName: '',
          options: []
        }
      ]
      this.datetypeList = [{
        typefield: '',
        typename: ''
      }]
    },
    rowClick(row) {
      this.indexSelf1 = row.index
    },
    // 数据库字段名-新增
    newLine1() {
      this.datetypeList.push({
        typefield: '',
        typename: ''
      })
    },
    // 删除
    delOption1() {
      this.datetypeList.splice(this.indexSelf1, 1)
    },
    // 新增
    newLine() {
      this.tableConfigList.push({
        fsql: '',
        fconnsql: '',
        flevel: '',
        fprimaryKey: '',
        fviewName: '',
        options: []
      })
    },
    // 删除
    delOption() {
      this.tableConfigList.splice(this.indexSelf, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.createVoucher {
  padding: 10px;
  background: #FFF;
  min-height: calc(100vh - 100px);
  .con {
    display: flex;
    justify-content: space-between;
    .conLef{
      width: 18%;
    }
    .conRig{
      width: 80%;
    }
  }
  .contant {
    display: flex;
    flex-direction: row;
    border: 1px solid #eee;
    border-radius: 5px;
    margin-top: 10px;
    padding: 5px;
    transition: all 0.2s;
    .content1 {
      width: 80%;
    }
    .content2 {
      width: 20%;
      position: relative;
      .el-button {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
  .active {
    background: #fff5e0;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item{
      min-width: 258px;
      margin-bottom: 0;
      .input-width{
        min-width: 138px!important;
      }
    }
    .textare {
      width: 90%;
    }
    .textare1 {
      min-height: 100px;
      &::v-deep .el-textarea__inner {
        min-height: 100px!important;
      }
    }
  }
}
</style>
